<template>
	<div>
		<el-select
			v-model.number="value"
			filterable
			clearable
			v-bind="props"
			@change="onChange"
			style="width: 100%"
		>
			<el-option
				v-for="(item, index) in list"
				:key="index"
				:value="item.id"
				:label="sortAndPhase_name(item)"
			/>
		</el-select>
	</div>
</template>

<script lang="ts">
import { computed, defineComponent, inject, onMounted, ref, watch } from "vue";
import { isArray } from "/@/core/utils";
import { useRefs } from "/@/core";

export default defineComponent({
	name: "courseSystem",

	props: {
		modelValue: [String, Number, Array],
		props: Object
	},

	// props: {
	// 	value: {
	// 		type: String,
	// 	}
	// },
  // 暴露这个方法
  expose: ['getSys'],
	emits: ["update:modelValue"],

	setup(props, { emit }) {

    const { refs, setRefs } = useRefs();
		// 请求服务
		const service = inject<any>("service");

		// 数据列表
		const list = ref<any[]>([]);

		// 绑定值
		const value = ref<number>();

		// 绑定值回调
		function onChange(val: any) {
			if (val==="" || val === undefined){
				value.value = null
			}
			emit("update:modelValue", value.value);
		}
		const sortAndPhase_name =  computed(() =>{
			return function(item: { phase_name: any; }){
				return item.phase_name
				// return item.sort+"-"+item.phase_name
			}
		})
		// 解析值
		watch(
			() => props.modelValue,
			(val: any) => {
				value.value = val;
			},
			{
				immediate: true
			}
		);

		onMounted(async () => {
			console.log(service);

			// list.value = await service.courseSystemService.list();
			console.log(list.value);
		});
    // 通过调用不同的课程类型出现不同的课程内容大主题
    const getSys =async function (course_type: any){
			// alert(course_type)
      list.value = await service.courseSystemService.list({course_type:course_type});
			console.log(list.value,"PPPPPPPPPPPPPPP");
			
    }

		return {
			list,
			value,
			onChange,
      getSys,
      refs,
      setRefs,
			sortAndPhase_name
		};
	}
});
</script>
